<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#view {
			width: 320px;
			height: 568px;
			background: url(images/bg.png);
			margin: 0 auto;
		}
		 #fly_me {
            width: 34px;
            height: 24px;
            position: absolute;
        }
	</style>
</head>
<body>
	<div id="view"></div>

	<script>
		// 创建
		var view = document.getElementById('view');
		var fly_me = document.createElement('div');
		fly_me.id = 'fly_me';
		fly_me.innerHTML = '<img src="images/me.png">';
		document.body.appendChild(fly_me);
		var fly_me = document.getElementById('fly_me');

		document.onmousemove = function (e) {
			var x = e.clientX - fly_me.offsetWidth / 2;
			var y = e.clientY - fly_me.offsetHeight / 2;
			var xCheck = x > view.offsetLeft && x < view.offsetLeft + view.offsetWidth - fly_me.offsetWidth;
			var yCheck = y > view.offsetTop && y < view.offsetHeight - view.offsetTop - fly_me.offsetHeight;
			if (xCheck && yCheck) {
				fly_me.style.left = x + 'px';
				fly_me.style.top = y + 'px';
				fly_me.flag = true;
			}
		}

		// 创建子弹
		var objB = {
			name: 'bullet',
			num: 1,
			arr: [], /*index|top|left*/
			width: 6,
        	height: 14,
        	path: 'images/b.png'
		};
		createBullet(objB);
		function createBullet (obj) {

			setInterval(function () {
				if (fly_me.flag) {
					var ele = document.createElement('div');
					document.body.appendChild(ele);
					ele.id = obj.name + obj.num;
					var len = obj.arr.length;
					if (len < 50) {
						obj.arr[len] = ele.id + '|';
						obj.num++;
						ele.style.width = obj.width + 'px';
						ele.style.height = obj.height + 'px';
						ele.style.background = 'url('+ obj.path +')';
						ele.style.position = 'absolute';
						ele.style.top = parseInt(fly_me.style.top) - 6 + 'px';
						obj.arr[len] = obj.arr[len] + ele.style.top + '|';
						ele.style.left = fly_me.offsetWidth / 2 + ele.offsetWidth / 2 + parseInt(fly_me.offsetLeft) + 'px';
						obj.arr[len] = obj.arr[len] + ele.style.left;
					}
			 	}
        	}, 1000)
    	}
		// 让子弹运动起来
		function moveBullet() {
			if (fly_me.flag) {
				for (var  i = 0; i < objB.arr.length; i++) {
					var newArr = objB.arr[i].split('|');
					var eleB = document.getElementById(newArr[0]);
					newArr[1] = parseInt(newArr[1]) - 1;
					eleB.style.top = newArr[1] + 'px';
					objB.arr[i] = newArr[0] + '|' + newArr[1] +'|' +newArr[2];
					if (newArr[1] < 0) {
						objB.arr.splice(i ,1);
						var delEle = document.getElementById(newArr[0]);
						delEle.parentNode.removeChild(delEle);
					}  
                }
			}
		}

		// 创建敌机
		var objF = {
			name: 'foe',
			num: 1,
			arr: [],
			width: 34,
        	height: 24,
        	path: 'images/foe.png'
		}
		createFoe(objF);
		function createFoe(obj) {
			setInterval(function () {
				if (fly_me.flag) {
					var ele = document.createElement('div');
					document.body.appendChild(ele);
					ele.id = obj.name + obj.num;
					var len = obj.arr.length; 
					if (len < 50) {
						obj.arr[len] = ele.id + '|';
						obj.num++;
						ele.style.width = obj.width + 'px';
						ele.style.height = obj.height + 'px';
						ele.style.background = 'url('+ obj.path +')';
						ele.style.position = 'absolute';
						ele.style.top = '0' + 'px';
						obj.arr[len] = obj.arr[len] + ele.style.top + '|';
						var ran = Math.random() * 286;
						ele.style.left = view.offsetLeft + ran + 'px';
						obj.arr[len] = obj.arr[len] + ele.style.left;
					}
				}
			}, 1000);
			
		}

		// 让敌机运动起来
		function moveFoe() {
			if (fly_me.flag) {
				for (var i = 0; i < objF.arr.length; i++) {
					var newArr = objF.arr[i].split('|');
					console.log(newArr); 
					var eleF = document.getElementById(newArr[0]);
					newArr[1] = parseInt(newArr[1]) + 1;
					eleF.style.top = newArr[1] + 'px';
					objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
					if (newArr[1] > view.offsetHeight - 24) {
						objF.arr.splice(i, 1);
						var delEle = document.getElementById(newArr[0]);
						delEle.parentNode.removeChild(delEle);
					}
				}
			}
		}

		setInterval(function () {
			moveBullet();
			moveFoe();
			for (var i = 0; i < objF.arr.length; i++) {
				var newArr = objF.arr[i].split('|');
				var eleF = document.getElementById(newArr[0]);
				var xFS = parseInt(newArr[2]);
				var xFE = parseInt(newArr[2]) + eleF.offsetWidth;
				var yFS = parseInt(newArr[1]);
				var yFE = parseInt(newArr[1]) + eleF.offsetHeight;

				for (var j = 0; j < objB.arr.length; j++) {
					var newArr1 = objB.arr[j].split('|');
					var eleB = document.getElementById(newArr1[0]);
					var xB = parseInt(newArr1[2]);
					var yB = parseInt(newArr1[1]);

					var xCheck = xB > xFS && xB < xFE;
					var yCheck = yB > yFS && yB < yFE;

					if (xCheck && yCheck) {
						objF.arr.splice(i, 1);
						eleF.parentNode.removeChild(eleF);
						objB.arr.splice(j, 1);
						eleB.parentNode.removeChild(eleB);
					}
				}
			}

		}, 10)
	</script>
</body>
</html>